import { ref, watchEffect } from 'vue'
import { getActiveThemeName, setActiveThemeName } from '@/utils/cache/local-storage'
import { $t } from '@/languages/index'

const DEFAULT_THEME_NAME = 'normal'

/** 主题列表 */
const themeList = computed(() => [
  {
    title: $t('默认'),
    name: 'normal'
  },
  {
    title: $t('深色模式'),
    name: 'dark'
  },
  {
    title: $t('深蓝色模式'),
    name: 'dark-blue'
  }
])

/** 正在应用的主题名称 */
const activeThemeName = ref(getActiveThemeName() || DEFAULT_THEME_NAME)
/** 设置主题 */
const setTheme = value => {
  activeThemeName.value = value
  if (value === 'normal') {
    document.documentElement.setAttribute('data-vxe-ui-theme', 'light')
  } else {
    document.documentElement.setAttribute('data-vxe-ui-theme', value)
  }
}

/** 在 html 根元素上挂载 class */
const setHtmlRootClassName = value => {
  document.documentElement.className = value
}

/** 初始化 */
const initTheme = () => {
  // watchEffect 来收集副作用
  watchEffect(() => {
    const value = activeThemeName.value
    if (value === 'normal') {
      document.documentElement.setAttribute('data-vxe-ui-theme', 'light')
    } else {
      document.documentElement.setAttribute('data-vxe-ui-theme', value)
    }
    setHtmlRootClassName(value)
    setActiveThemeName(value)
  })
}

/** 主题 hook */
export function useTheme() {
  return { themeList, activeThemeName, initTheme, setTheme }
}
